<template>
  <div class="container">
    <div class="section">
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            <span class="must">*</span>
            <span>{{name}}：</span>
          </div>
          <div class="detail">
            <el-input v-model="form.name" name="name" :maxlength="42" placeholder="请输入内容" />
          </div>
        </li>
        <li class="list-item">
          <div class="tip">
            <span class="must">*</span> 展示图：
            <!--                <div class="msk">图片尺寸:1:1 推荐（355px*355px）</div>-->
          </div>
          <div class="detail project_detail">
            <ul class="img-list">
              <li v-for="(item, index) in img_main_list" :key="index" class="img-item">
                <img v-if="item.url" :src="item.url" alt class="img" />
                <div class="del-btn" @click.stop="del_main(item)">
                  <i class="el-icon-delete" />
                </div>
              </li>
            </ul>
            <div class="upload-btn">
              <el-upload
                action="https://mpingweb.yuepinyuemei.com/api/upload"
                :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                :multiple="false"
                :file-list="img_main_list"
                :show-file-list="false"
                list-type="picture-card"
                :on-success="upload_main"
                :before-upload="before_main"
                :on-remove="del_main"
              >
                <i class="el-icon-plus icon" />
              </el-upload>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="sub-btn">
      <el-button type="primary" @click="save_index()">保存</el-button>
    </div>
  </div>
</template>
<script>
  import { addGoods } from '../../../api/goods'
  import { addIndex, indexDelete, indexDetail, updateIndex } from '../../../api/drop'

  export default {
    data(){
      return{
        name:'',
        page_status:'',
        form:{
          indexad_id:'',//编辑用 id
          name:'',
          image:'',
          type:'',
        },
        img_main_list:[],//图片
      }
    },
    watch: {
      "form.image"(val) {
        const arr = [
          {
            name: "main",
            url: this.common.img_url + val,
          },
        ];
        this.img_main_list = arr;
        this.$forceUpdate();
      },
    },

    mounted() {
      //page_status  1 添加  2 编辑
      //page_type  -type   1 闪屏  2 下拉
      this.page_status = this.$route.query.page_status
      this.form.type = this.$route.query.page_type
      if(this.page_status == 1 &&  this.form.type == 1){
        this.$route.meta.title = "添加闪屏";
      }else if(this.page_status == 1 &&  this.form.type == 2){
        this.$route.meta.title = "添加下拉效果";
      }else if(this.page_status == 2 && this.form.type == 1){
        this.$route.meta.title = "编辑闪屏";
      }else if(this.page_status == 2 &&  this.form.type == 2){
        this.$route.meta.title = "编辑下拉效果";
      }
      this.name =  this.form.type == 1 ? "闪屏名称" : "效果名称"

      if(this.page_status == 2){
        this.index(this.$route.query.id)
      }

    },
    methods:{
      // 上传主图
      upload_main(res) {
        this.loading = false;
        this.form.image = res.data;
        this.$forceUpdate();
      },
      // 上传主图之前钩子
      before_main() {
        this.loading = true;
      },
      // 删除主图
      del_main(val) {
        this.form.image = "";
        this.img_main_list =[]
      },

      //获取详情
      index(id){
        indexDetail({
          indexad_id: id,
        })
          .then((result) => {
            if(result.data.status == 0){
              let item = result.data.data
              this.form = item
              this.form.indexad_id = item.id
            }
          })
          .catch((err) => {
            this.$message.error("服务器网络错误，请稍后重试");
          });
      },

      //保存
      save_index(){
        if(this.form.name == ""){
          this.$message.error("请输入"+this.name);
        }else if(this.form.image == ""){
          this.$message.error("请上传展示图");
        } else {
          switch (+this.page_status) {
            case 1:
              this.add_index(this.form);
              break;
            case 2:
              this.rewrite_index(this.form);
              break;

            default:
              break;
          }
        }

      },

      //添加
      add_index(e){
        addIndex(e) .then((res) => {
          if(res.data.status == 0){
            this.$message({
              showClose: true,
              message: "添加成功" ,
              type: "success",
            });
            this.$router.push({ path: this.form.type == 1 ? '/splashScreen' : '/dropdown'})
          }else {
            this.$message.error(res.data.message);
          }
        })
          .catch((res) => {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          });
      },


      //编辑
      rewrite_index(e){
        updateIndex(e) .then((res) => {
          if(res.data.status == 0){
            this.$message({
              showClose: true,
              message: "编辑成功" ,
              type: "success",
            });
            this.$router.push({ path: this.form.type == 1 ? '/splashScreen' : '/dropdown'})
          }else {
            this.$message.error("编辑失败" ,res.data.message);
          }
        })
          .catch((res) => {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          });
      },



    },

  }

</script>
<style lang="scss" scoped>
  .container {
    padding: 30px;
    .section {
      .title {
        width: 130px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 20px;
      }
      .info {
        margin-left: 40px;
        .list-item {
          margin-bottom: 20px;
          .tip {
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
            width: 150px;
            text-align: right;
            .msk {
              font-size: 10px;
              color: #666;
              margin-right: 20px;
              margin-top: 10px;
            }
            .must {
              display: inline-block;
              vertical-align: middle;
              color: #ff3040;
            }
          }
          .detail {
            color: #666;
            min-width: 350px;
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            .el-select {
              display: block !important;
            }
            .img-list {
              display: inline-block;
              vertical-align: middle;
              .img-item {
                width: 150px;
                height: 150px;
                border: 1px solid #ccc;
                display: inline-block;
                vertical-align: middle;
                overflow: hidden;
                margin-right: 10px;
                position: relative;
                .img {
                  width: 100%;
                }
                .del-btn {
                  width: 100%;
                  height: 100%;
                  background-color: rgba(0, 0, 0, 0.3);
                  color: #fff;
                  line-height: 150px;
                  text-align: center;
                  font-size: 40px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  cursor: pointer;
                  display: none;
                }
                &:hover {
                  .del-btn {
                    display: block;
                  }
                }
              }
            }
            .upload-btn {
              width: 150px;
              height: 150px;
              display: inline-block;
              vertical-align: middle;
              position: relative;
              .el-icon-plus {
                width: 150px;
                height: 150px;
                display: block;
                position: relative;
                &::before {
                  font-size: 30px;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
            &.project_detail {
              vertical-align: top;
            }

            .rule {
              display: flex;
              align-items: center;
              justify-content: space-around;
              flex-direction: row;
            }
          }
        }
      }
    }
    .sub-btn {
      .el-button {
        margin: 80px auto 20px auto;
        display: block;
      }
    }

    .form-control {
      width: 100%;
      padding-right: 6px;
      min-height: 300px;
      -webkit-overflow-scrolling: touch;
      resize: none;
      outline: 0 none;
      margin-top: 12px;
      font-size: 14px;
      /*font-family: MicrosoftYaHei;*/
      color: rgba(13, 20, 30, 1);
      line-height: 19px;
      opacity: 0.6;
    }
  }
</style>
